<template>
  <div class="btn-group" role="group" :class="[btnGroupSize]">
    <button v-for="item of groupButtons"
            type="button"
            class="btn btn-default"
            :class="{active: groupSelectedItem == $index}"
            @click.stop="onButtonGroupItemClick($index, $event)">{{ item }}</button>
  </div>
</template>

<script type='text/babel'>
  export default {
    props: {
      groupButtons: Array,
      groupSize: String,
      groupSelectedItem: {
        type: Number,
        default: -1
      }
    },
    computed: {
      btnGroupSize: function () {
        var size = this.groupSize
        if (size) {
          size = 'btn-group-' + size
        }
        return size
      }
    },
    methods: {
      onButtonGroupItemClick: function (index, event) {
        var self = this
        self.$dispatch('ON_BUTTON_GROUP_ITEM_CLICK', self, index, self.groupButtons, event)
        if (self.$store) {
          self.$store.dispatch('ON_BUTTON_GROUP_ITEM_CLICK', self, index, self.groupButtons, event)
        }
      }
    }
  }
</script>

<style>
</style>
